<template>
  <div class="form-item mb-4">
    <div class="flex flex-row justify-between items-center">
      <div class="flex items-center mb-2">
        <span
          class="icon-wrapper rounded-full w-6 h-6 flex items-center justify-center text-sm"
          :style="{
            backgroundColor: MEDDIC_STATUS_STYLE[status]?.bg,
            color: MEDDIC_STATUS_STYLE[status]?.text,
            border: status === MEDDIC_STATUS.NOT_FILLED ? '1px solid #DCDCDC' : 'none',
          }"
          >{{ icon }}</span
        >
        <span class="ml-2 text-gray-700 text-sm">{{ title }}</span>
        <el-tooltip
          :content="tooltipContent"
          placement="top"
          @show="handleTooltipShow"
          @hide="handleTooltipHide"
        >
          <van-icon
            class="ml-2"
            name="question-o"
            :style="{ color: isTooltipVisible ? 'blue' : 'inherit' }"
          />
        </el-tooltip>
      </div>

      <div class="flex flex-row items-center gap-2">
        <!-- <el-icon
          class="cursor-pointer"
          :color="allowEdit ? '#436BFF' : 'gray'"
          @click="handleClickEdit"
          ><Edit
        /></el-icon> -->

        <el-icon
          class="cursor-pointer"
          color="#436BFF"
          v-if="cp_lock"
          @click="handleClickLock"
          ><Lock
        /></el-icon>
        <el-icon class="cursor-pointer" v-else @click="handleClickLock"
          ><Unlock
        /></el-icon>
      </div>
    </div>

    <el-input
      type="textarea"
      :model-value="modelValue"
      :autosize="{ minRows: 3, maxRows: 10 }"
      placeholder="请输入"
      maxlength="500"
      :readonly="!allowEdit"
      :disabled="!allowEdit"
      @blur="handleBlur"
      @update:model-value="handleInput"
    />
  </div>
</template>

<script setup>
import { MEDDIC_STATUS, MEDDIC_STATUS_STYLE } from "./meddicConstants.js";
import { ref, defineEmits, computed } from "vue";
import { useCustomerStore } from "@/store/modules/customer";

const store = useCustomerStore();

const props = defineProps({
  icon: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },

  tooltipContent: {
    type: String,
    required: true,
  },
  modelValue: {
    type: String,
    default: "",
  },
  status: {
    type: Number,
    default: MEDDIC_STATUS.NOT_FILLED,
    validator: (value) => {
      return Object.values(MEDDIC_STATUS).includes(value);
    },
  },
  editMode: {
    type: Boolean,
    default: false,
  },
  lock: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue", "update:lock", "onBlur"]);

const cp_lock = computed({
  set(v) {
    emit("update:lock", v);
  },

  get() {
    return props.lock;
  },
});
const isTooltipVisible = ref(false);

const allowEdit = computed(() => {
  return props.editMode && cp_lock.value === false;
});

function handleClickLock() {
  console.log("handleClickLock: ", cp_lock.value);
  cp_lock.value = !cp_lock.value;
  console.log("handleClickLock:2 ", cp_lock.value);
  store.updateCustomerMeddicAction({
    meddicType: props.type,
    contentLocked: !cp_lock.value ? 1 : 0,
  });
}

function handleBlur() {
  allowEdit.value = false;
  emit("onBlur", {
    meddicType: props.type,
    content: props.modelValue,
  });
}

function handleInput(value) {
  console.log("handleInput", value);
  emit("update:modelValue", value);
}

function handleTooltipShow() {
  isTooltipVisible.value = true;
}

function handleTooltipHide() {
  isTooltipVisible.value = false;
}
</script>

<style scoped>
.icon-wrapper {
  transition: all 0.3s ease;
}
</style>
